<!DOCTYPE html>
<meta charset="UTF-8">
<div style="padding: 10px;">
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>增加删除导航条.</div>
	</div>
	<div style="margin: 10px 0;">
		<a href="javascript:void(0)" data-type="button" onclick="accordion_actions_select()">选择</a>
		<a href="javascript:void(0)" data-type="button" onclick="accordion_actions_add()">新增</a>
		<a href="javascript:void(0)" data-type="button" onclick="accordion_actions_remove()">删除</a>
	</div>
	<div id="accordion_actions" data-type="accordion" data-defs="border:true" style="width: 500px; height: 300px;">
		<div title="关于" data-defs="iconCls:'icon-ok'"
			style="overflow: auto; padding: 10px;">
			<h3 style="color: #0099FF;">jQuery 导航条</h3>
		</div>
	</div>
</div>
<script type="text/javascript">
	function accordion_actions_select() {
	    $.messager.prompt('Prompt', '请输入导航条名称:', function(s) {
		    if (s) {
			    $('#accordion_actions').accordion('select', s);
		    }
	    });
    }
    var idx = 1;
    function accordion_actions_add() {
	    $('#accordion_actions').accordion('add', {
	        title : '标题' + idx,
	        content : '测试导航条' + idx,
	        bodyCls : 'bodyClsTest',
	        headerCls : 'headerClsTest'
	    });
	    idx++;
    }
    function accordion_actions_remove() {
	    var pp = $('#accordion_actions').accordion('getSelected');
	    if (pp) {
		    var index = $('#accordion_actions').accordion('getPanelIndex', pp);
		    $('#accordion_actions').accordion('remove', index);
	    }
    }
</script>
